﻿<template>
	<div class="data-list">
		<data-filter v-if="filters.length!=0" :filters="filters" @do-filter="doFilter" />
		<slot />
		<el-pagination layout="total, sizes, prev, pager, next, jumper"
		    :total="total" 
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :current-page="pageNum"
		    :page-sizes="pageSizes"
      		:page-size="pageSize"
		    >
		</el-pagination>
	</div>

</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
	name:'data-list',
	data(){
		return{			
			pageNum:1,
			defaultPageSize:10,
			pageSize:this.defaultPageSize,
			pageSizes:[5,10,20,30],
			paramsFilter:{}
		}
	},
	props:{		
		filters:{
			type:Array,
			default:[]
		},
		total:null
	},
	computed:{
		
	},
	watch:{	
	    "$route":{
			handler(to, from){
				this.handleRoute(to)
			},
		  deep:true
		}
	},
	created(){
		this.handleRoute(this.$route)
	},
	mounted(){
	},
	methods: {
		refresh(){
			this.$emit('data-refresh',Object.assign({pageSize:this.pageSize,pageNum:this.pageNum},this.paramsFilter))
		},
		doFilter(paramsFilter){
			this.paramsFilter=paramsFilter;
			this.$emit('data-refresh',Object.assign({pageSize:this.pageSize,pageNum:1},this.paramsFilter))
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.$router.push({ name: this.$route.name, query:Object.assign({},this.$route.query,
				{ pageNum: this.$route.query.pageNum ,pageSize:val}
			)})
		},
		handleCurrentChange(val){
			this.pageNum = val;
			this.$router.push({ name: this.$route.name, query:Object.assign({},this.$route.query,{ pageNum: val ,pageSize:this.$route.query.pageSize}) })
		},
		handleRoute(route){
			var pgsizeSting = this.pageSizes.toString();
			var page=Object.assign({pageNum:this.pageNum,pageSize:this.pageSize},route.query)
			page.pageNum=Number(page.pageNum)
			if(!page.pageNum || !_.isNumber(page.pageNum)){
				page.pageNum=this.pageNum
			}else{
				this.pageNum=Number(page.pageNum)
			}
			if(!page.pageSize || !_.isNumber(page.pageSize)){
				if(pgsizeSting.indexOf(page.pageSize) == -1){
					page.pageSize=this.defaultPageSize;
					this.$router.replace({name:route.name, query: Object.assign({},this.$route.query,{pageSize:page.pageSize,pageNum:page.pageNum})})
					return false;
				}else{
					this.pageSize = Number(page.pageSize);
				}
			}else{
				this.pageSize=Number(page.pageSize)
			}
			if(isNaN(route.query.pageSize) || isNaN(route.query.pageNum)){
				this.$router.replace({ name: route.name, query: Object.assign({},this.$route.query,{ pageSize:page.pageSize,pageNum:page.pageNum})})
				return false;
			}
			this.$emit('data-refresh',Object.assign({pageSize:page.pageSize,pageNum:page.pageNum},this.paramsFilter))
		}
  }
}

</script>

<style>
</style>


